<template>
  <v-navigation-drawer
    class="z-index-xl"
    fixed
    v-model="drawerIsShow"
    color="thirdary"
  >
    <div class="d-flex flex-column align-center pa-5 pt-10">
      <v-avatar size="80" color="primary">
        <v-img :src="profile ? profile.avatar : ''"></v-img>
      </v-avatar>
      <div class="text-h6 fontblack--text mt-2">
        {{ profile ? profile.nikename : "未登录" }}
      </div>
      <div>
        <span class="fontblack--text">预约中:</span
        ><span class="primary--text ml-2">0</span>
      </div>
    </div>
    <v-divider></v-divider>
    <v-list>
      <v-list-item-group :value="value" color="primary">
        <v-list-item class="mx-2" v-for="(tab, index) in tabs" :key="index"
          ><v-list-item-title class="fontblack--text" @click="toPath(index)">{{
            tab.text
          }}</v-list-item-title></v-list-item
        >
      </v-list-item-group>
    </v-list>
  </v-navigation-drawer>
</template>



<script>
import eventBus from "../../eventBus/eventBus.js";
import { mapState } from "vuex";
export default {
  props: {
    tabs: Array,
  },
  data() {
    return {
      drawerIsShow: false,
      value: 2,
    };
  },
  computed: {
    ...mapState(["profile"]),
  },
  methods: {
    toPath(newIndex) {
      const toPath = this.tabs[newIndex].path;
      if (this.$route.path !== toPath) {
        this.$router.push(toPath);
      }
      this.drawerIsShow = false;
      this.value = newIndex;
    },
  },
  mounted() {
    eventBus.$on("openTheDrawer", () => {
      this.drawerIsShow = true;
    });
  },
};
</script>



<style lang="scss" scoped>
</style>
